<template>
  <div id="left-part">
    <img
      src="~assets/img/needle.png"
      alt=""
      :class="{ needle: true, 'is-play': isPlay }">
    <div :class="{ disc: true, 'is-play': isPlay }">
      <img class="cover" :src="imgUrl" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: 'LeftPart',
  computed: {
    // 1. 是否在播放
    isPlay () {
      return this.$store.state.playInfo.isPlay
    },
    // 2. 图片照片
    imgUrl () {
      return this.$store.state.playInfo.songData && this.$store.state.playInfo.songData.al.picUrl
    }
  }
}
</script>

<style scoped lang="less">
#left-part {
  user-select: none;
  position: relative;
  width: 50%;
  height: 200px;
  // background-color: red;
  .needle {
    position: absolute;
    width: 120px;
    left: 48%;
    transform: translate(-50%, -18px) rotateZ(-40deg);
    transform-origin: 20px 17px;
    transition: all 600ms;
    z-index: 1;
    &.is-play {
      transform: translate(-50%, -18px) rotateZ(-5deg);
    }
  }
  .disc {
    position: absolute;
    left: 3px;
    top: 35%;
    width: 76% ;
    height: 0px;
    padding-top: 76%;
    background: url('~assets/img/disc.png');
    background-position: -3px -3px;
    background-size: 102%;
    border-radius: 50%;
    // border: 3px solid #bdbbbd;
    box-shadow: 0 0 1px 3px #c9cbcc;
    transition: all 100s;
    animation: disc-rotate 30s linear infinite forwards;
    animation-play-state: paused;
    &.is-play {
      animation-play-state: running;
    }
    img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      width: 65%;
    }
  }
}
@keyframes disc-rotate {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}
</style>
